// packageProduct/pages/detail/chart/chart.js
import * as echarts from '../../../components/ec-canvas/echarts';
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        customStyle: { //自定义样式
            type: String,
            value: ""
        },
        list: { //列表数据
            type: Array,
            value: []
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        ec: {
            lazyLoad: true
        }
    },

    observers: {
        list: function (val) {
            if (val && val.length > 0) {
                const ecComponent = this.selectComponent('#mychart-dom-bar');
                let data1 = [], data2 = [], data3 = []
                for (let i = 0; i < val.length; i ++) {
                    data1.push(val[i].n_nav);
                    data2.push(val[i].n_added_nav);
                    data3.push(val[i].t_date.split(" ")[0]);
                }
                let min = Math.floor(Math.min(Math.min.apply(null, data1), Math.min.apply(null, data2)) * 10) / 10;
                let max = Math.ceil(Math.max(Math.max.apply(null, data1), Math.max.apply(null, data2)) * 10) / 10;
                let option = {
                    grid: {
                        top: 55,
                        left: 50,
                        bottom: 70
                    },
                    color: [
                        "#ff0000",
                        "#0036ff",
                    ],
                    tooltip : {
                        trigger: 'axis',
                        formatter: function(params) {
                            return params[0].name + '\n'
                                + params[0].seriesName + ' : ' + params[0].value + ' \n'
                                + params[1].seriesName + ' : ' + params[1].value ;
                        },
                        axisPointer: {
                            animation: false
                        }
                    },
                    legend: {
                        top: 15,
                        data:[
                            {name: '净值'},
                            {name: '累计净值'}
                        ],

                    },
                    dataZoom: [
                        {
                            show: true,
                            realtime: true,
                        },

                    ],
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : data3.map(function (str) {
                                return str.replace(' ', '\n')
                            }),
                            axisLine: {
                                color: "#f5f5f5"
                            },
                            axisLabel: {
                                color: "#999"
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            min:min,
                            max:max,
                            axisLine: {
                                color: "#f5f5f5"
                            },
                            axisLabel: {
                                color: "#999"
                            },
                        },

                    ],
                    series: [
                        {
                            name:'净值',
                            type:'line',
                            hoverAnimation: false,
                            lineStyle: {
                                normal: {
                                    width: 1
                                }
                            },
                            data:data1,
                            markPoint:{
                                data : [
                                    //{type : 'max', name: '最大值'},
                                    //{type : 'min', name: '最小值'}
                                ]
                            },
                        },
                        {
                            name:'累计净值',
                            type:'line',
                            hoverAnimation: false,
                            data: data2,
                            markPoint:{
                                data : [
                                    //{type : 'max', name: '最大值'},
                                    //{type : 'min', name: '最小值'}
                                ]
                            },
                        }
                    ]
                };
                ecComponent.init((canvas, width, height, dpr) => {
                    // 获取组件的 canvas、width、height 后的回调函数
                    // 在这里初始化图表
                    const chart = echarts.init(canvas, null, {
                        width: width,
                        height: height,
                        devicePixelRatio: dpr // new
                    });
                    chart.setOption(option);
                    // 注意这里一定要返回 chart 实例，否则会影响事件处理等
                    return chart;
                });
            }
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {

    }
})
